vue3+elementplus+table动态列

2024-11-09 06:18:490 次浏览 投稿

思路

1.colsArr，用来渲染列表。dataList，用来渲染行数据2.循环colsArr，生成 el-table-column3.数据格式如下

colsArr: [{ colName: '排名', key: 'cols0' },{ colName: '区域', key: 'cols1' },{ colName: '主题名称', key: 'cols2' },{ colName: '次数', key: 'cols3' },{ colName: '人数', key: 'cols4' }],dataList: [{ cols1: '区域1', cols2: '春', cols3: 1, cols4: 5 },{ cols1: '区域2', cols2: '春', cols3: 8, cols4: 24 },{ cols1: '区域3', cols2: '春', cols3: 18, cols4: 52 },{ cols1: '区域4', cols2: '春', cols3: 1, cols4: 35 },{ cols1: '区域5', cols2: '春', cols3: 1, cols4: 20 }]具体代码{{ scope.row[item.key].value }}{{ scope.row[item.key].value }}export default {data() {return {/** * @params * colName 表头名称 * key 自定义列名 处理数据是使用 */colsArr: [{ colName: '排名', key: 'cols0' },{ colName: '区域', key: 'cols1' },{ colName: '主题名称', key: 'cols2' },{ colName: '次数', key: 'cols3' },{ colName: '人数', key: 'cols4' }],/** * @params * 此处的列名必须和colsArr中定义的一致 */dataList: [{ cols1: '区域1', cols2: '春', cols3: 1, cols4: 5 },{ cols1: '区域2', cols2: '春', cols3: 8, cols4: 24 },{ cols1: '区域3', cols2: '春', cols3: 18, cols4: 52 },{ cols1: '区域4', cols2: '春', cols3: 1, cols4: 35 },{ cols1: '区域5', cols2: '春', cols3: 1, cols4: 20 }]};},computed: {// 处理数据initDataList() {let arr = [];this.dataList.forEach((item, index) => {let obj = {};this.colsArr.forEach((prop, idx) => {if(idx == 0) {obj[prop.key] = { value: index + 1, name: prop.colName };} else {obj[prop.key] = { value: item[prop.key], name: prop.colName };}})arr.push(obj);})return arr;}}};.element-table {/deep/ .el-table {background-color: rgba(0, 0, 0, 0);}/deep/ .el-table::before {height: 0;} /deep/ .el-table th.el-table__cell,/deep/ .el-table td.el-table__cell {border-bottom: none;padding: 0;color: #FFF;font-size: 14px;}/deep/ .el-table .el-table__header-wrapper {height: 40px;line-height: 40px;}/deep/ .el-table .el-table__header-wrapper .cell {white-space: nowrap;text-overflow: ellipsis;}/deep/ .el-table .el-table__row {height: 40px;background: #182041;img {height: 20px;vertical-align: middle;}&:nth-child(2),&:nth-child(4) {background: #212949;}}/deep/ .el-table tbody tr:hover > td { background: rgba(0, 0, 0, 0);}/deep/ .el-table__empty-block {background: #182041;}span.icon {display: inline-block;width: 20px;height: 20px;line-height: 20px;text-align: center;border: 1px solid #FFFFFF;border-radius: 2px;}}项目实战import {ref,reactive,defineProps} from "vue"import { getDataApi } from "../api";const props=defineProps(['tableId'])const colsArr = ref({ colName: '', colKey: '' })const rowsArr = ref([])const getData = () => { getDataApi(props.tableId).then(res => {colsArr.value = Object.keys(res.data[0]).map((item,index) => { return { colName: item, colKey: 'colKey' +index }})console.log('colsarr',colsArr.value);res.data.forEach(item1=>{ console.log('item1',item1); let obj = {} Object.keys(item1).forEach((item2,index2) => {obj['colKey' + index2] = item1[item2] })rowsArr.value.push({...item1,...obj })})console.log('rowsArr',rowsArr.value);// tableData.value = detail.value.tableStructureList }).catch(err => {console.log('err', err) })}getData()